<template>
	<!--留言表单-->
	<div>
		<el-form ref="ruleFormRef" label-width="auto" :model="formRef" style="max-width: 600px" label-position="left">
			<el-form-item prop="name" label="name">
				<el-input v-model="formRef.name" placeholder="anonymity" />
			</el-form-item>

			<el-form-item prop="content" label="content ">
				<el-input v-model="formRef.content" type="textarea" />
			</el-form-item>
			<el-form-item>

				<el-upload v-model:file-list="fileList"
					:action="api_url + '/api/v1/aha/external/file/upload'" list-type="picture-card"
					:on-preview="handlePictureCardPreview" :on-remove="handleRemove"
					:on-success="handleAvatarSuccess"
					>
					<el-icon>
						<Plus />
					</el-icon>
				</el-upload>
				<el-dialog v-model="dialogVisible">
					<img w-full :src="dialogImageUrl" alt="Preview Image" />
				</el-dialog>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit(ruleFormRef)">submit</el-button>
				<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'

let api_url = import.meta.env.VITE_API_URL

const ruleFormRef = ref<FormInstance>();

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const formRef = ref<{
	name: string,
	content: string
}>({
	name: "",
	content: ""
})

const imageUrl = ref([])

const fileList = ref<UploadUserFile[]>([])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url!
	dialogVisible.value = true
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {

  imageUrl.value.push({content: response, contentType: "img"})
  console.log(imageUrl.value)
}

const onSubmit = (formEl) => {

	// 获取数据  
	let data = localStorage.getItem('sessionKey');
	if (data == null || data === "") {
		data = uuidv4()
		// 存储数据  
		localStorage.setItem('sessionKey', data);
	}

	let anonymousEnable = true;

	let nameValue = "匿名";

	if (formRef.value.name !== "") {
		anonymousEnable = false;
		nameValue = formRef.value.name
	}

	if (formRef.value.content == "" || formRef.value.content == null) {
		ElMessage({
			message: '内容不能为空的啊',
			type: 'warning',
		})
		return;
	}

	const mbList = {
		mbList:
			[{
				anonymousEnable: anonymousEnable,
				sessionKey: data,
				name: nameValue,
				contentText: formRef.value.content,
				mbcList: imageUrl.value
			}
			]
	}

	let body = JSON.stringify(mbList);

	fetch(api_url + "/api/v1/aha/external/mb/amb_list", {
		method: "POST",
		body: body,
		headers: {
			"Content-Type": "application/json",
		}
	})
		.then((result) => {
			ElMessage({
				message: '添加成功',
				type: 'success',
			});
			formEl.resetFields()
		})
		.catch((error) => {
			console.error("Error:", error);
		});
}



const resetForm = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
}
</script>